<template>
  <div>
     <!-- 面包屑导航区 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Music</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable 
          >
            <el-button
            
              slot="append"
              icon="el-icon-search"
              @click="getorderlist"
            ></el-button> </el-input
        ></el-col>
        
      </el-row>
      <el-table border
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      type="index">
    </el-table-column>
    <el-table-column
      prop="order_number"
      label="订单编号"
      width="480">
    </el-table-column>
    <el-table-column
      prop="order_price"
      label="订单价格"
      width="80">
    </el-table-column>
    <el-table-column
    width="150"
      prop="pay_status"
      label="是否付款">
      <template #default="{row}">
        <el-tag type="success" v-if="row.pay_status==1">已付款</el-tag>
        <el-tag type="danger" v-else>未付款</el-tag>
      </template>
    </el-table-column>
    <el-table-column
    width="200"
      prop="is_send"
      label="是否发货">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="下单时间">
      <template #default="{row}">{{ moment(row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</template>
    </el-table-column>
    <el-table-column
     
      label="操作">
      <template #default="{row}">
        <el-button type="primary" icon="el-icon-edit" @click="editbtn(row.order_id)">编辑</el-button>
        <el-button type="success"  icon="el-icon-location" @click="check" >查看物流</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagesize"
      :page-sizes="[5,10,20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog
  title="提示"
  :visible.sync="look"
  width="50%"
  >
  <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
  <span slot="footer" class="dialog-footer">
    <el-button @click="look = false">取 消</el-button>
    <el-button type="primary" @click="look = false">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改订单数据"
  :visible.sync="editorder"
  width="50%"
  >
  <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="订单价格" prop="order_price">
    <el-input v-model="ruleForm.order_price"></el-input>
  </el-form-item>
  <div>是否付款 <el-radio v-model="radio" label="0">已付款</el-radio>
               <el-radio v-model="radio" label="1">未付款</el-radio>
  </div>
  <div>是否发货 <el-radio v-model="radio1" label="1">是</el-radio>
              <el-radio v-model="radio1" label="0">否</el-radio>
  </div>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editorder = false">取 消</el-button>
    <el-button type="primary" @click="xiu" >确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {Message} from  'element-ui'
import moment from 'moment'
import {getorder,editorders,uporders} from '@/api/user'
export default {
  created() {
    this.getorderlist()
  },
  methods: {
   async xiu() {
      let res = await uporders(this.ruleForm.order_id, {
        is_send: this.radio1,
        order_price: this.ruleForm.order_price,
      })
      if (res.meta.status !== 201) {
        return Message.error('更新失败')
      }
      Message.success('更新成功')
      console.log(res);
      this.editorder = false
      this.getorderlist()
    },
   async editbtn(id) {
      this.editorder = true
      let res = await editorders(id)
      console.log(1);
      console.log(res);
      this.ruleForm =res.data
    }, 
    check() {
      this.look = true
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getorderlist()
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getorderlist()
    },
    async getorderlist() {
     let res  = await getorder(this.queryInfo)
      console.log(res);
      this.tableData = res.data.goods
    this.total = res.data.total
   },
    getorder(){}
  },
data() {
  return {
    radio: '1',
    radio1:'1',
    ruleForm:{order_price:''},
    editorder:false,
    reverse: true,
        activities: [{
          content: '顺丰速运 已收取快件',
          timestamp: '2018-04-15'
        },{
          content: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
          timestamp: '2018-04-15'
        },{
          content: '快件到达 [北京顺义集散中心]',
          timestamp: '2018-04-15'
        },{
          content: '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
          timestamp: '2018-04-15'
        },{
          content: '快件到达 [北京海淀育新小区营业点]',
          timestamp: '2018-04-15'
        }, {
          content: '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
          timestamp: '2018-04-13'
        }, {
          content: '已签收,感谢使用顺丰,期待再次为您服务',
          timestamp: '2018-04-11'
        }],
    look:false,
    moment,
    total:0,
    tableData:[],
    queryInfo: {
      query: '',
      pagenum: 1,
      pagesize:10
    }
  }
},
}
</script>

<style>

</style>